﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8" />
    <link rel="icon" href="favicon.png" type="image/x-icon" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 
    <link href="css/vendor/bootstrap.css" rel="stylesheet" />
    <link href="css/vendor/font-awesome.css" rel="stylesheet" />
    <link href="css/vendor/slick.css" rel="stylesheet" />
    <link href="css/vendor/slick-theme.css" rel="stylesheet" />
    <link href="css/main.css" rel="stylesheet" />
</head>
<body>

    <header>
        <div class="container">
            <div class="logo">
                <a href="index.html"><img src="assets/img/logo.png" alt=""/></a>
            </div>
            <div class="menu">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="services.html">Services</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                    <li><a href="about.html" class="active">About Us</a></li>
                    <li><a href="blog.html">Blog</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </div>
            <div class="mobile-menu"><i class="fa fa-bars"></i></div>
        </div>
    </header>

   <div class="intro-page">
       <div class="container">
           <h1>About Us</h1>
           <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
       </div>
   </div>

    <div class="wrapper">
        <section class="our-history">
            <div class="container">
                <div class="row">
                    <div class="col-md-5">
                        <img src="assets/img/Monitor.png" alt="" />
                    </div>
                    <div class="col-md-7">
                        <h2>Our History</h2>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ip sum has been the industry's standard dummy text ever since the 1500s, when an unk- nown printer took a galley of type and scrambled it to make a type specimen book.</p>
                        <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                        <a href="#" class="button">Browse Our Work</a>
                    </div>
                </div>
            </div>
        </section>

        <section class="our-team">
            <div class="container">
                <h2>Our Team</h2>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                <span class="dot-dash dark">.</span>
                <div class="our-team--container">
                    <div class="our-team--item">
                        <div class="our-team--item__image">
                            <img src="assets/img/user.png" alt="" />
                        </div>
                        <div class="our-team--item__info">
                            <h3>John Doe</h3>
                            <h5>UI/UX Designer</h5>
                        </div>
                    </div>
                    <div class="our-team--item">
                        <div class="our-team--item__image">
                            <img src="assets/img/user.png" alt="" />
                        </div>
                        <div class="our-team--item__info">
                            <h3>John Doe</h3>
                            <h5>UI/UX Designer</h5>
                        </div>
                    </div>
                    <div class="our-team--item">
                        <div class="our-team--item__image">
                            <img src="assets/img/user.png" alt="" />
                        </div>
                        <div class="our-team--item__info">
                            <h3>John Doe</h3>
                            <h5>UI/UX Designer</h5>
                        </div>
                    </div>
                    <div class="our-team--item">
                        <div class="our-team--item__image">
                            <img src="assets/img/user.png" alt="" />
                        </div>
                        <div class="our-team--item__info">
                            <h3>John Doe</h3>
                            <h5>UI/UX Designer</h5>
                        </div>
                    </div>
                    <div class="our-team--item">
                        <div class="our-team--item__image">
                            <img src="assets/img/user.png" alt="" />
                        </div>
                        <div class="our-team--item__info">
                            <h3>John Doe</h3>
                            <h5>UI/UX Designer</h5>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="our-history-about">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <h2>Our Evolution</h2>
                        <p>Lorem ipsum dolor sit amet consectetur.</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <ul class="timeline">
                            <li>
                                <div class="timeline-image">
                                    <img class="rounded-circle img-fluid" src="assets/img/about1.jpg" alt="">
                                </div>
                                <div class="timeline-panel">
                                    <div class="timeline-heading">
                                        <h4>2009-2011</h4>
                                        <h4 class="subheading">Our Humble Beginnings</h4>
                                    </div>
                                    <div class="timeline-body">
                                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
                                    </div>
                                </div>
                            </li>
                            <li class="timeline-inverted">
                                <div class="timeline-image">
                                    <img class="rounded-circle img-fluid" src="assets/img/about2.jpg" alt="">
                                </div>
                                <div class="timeline-panel">
                                    <div class="timeline-heading">
                                        <h4>March 2011</h4>
                                        <h4 class="subheading">An Agency is Born</h4>
                                    </div>
                                    <div class="timeline-body">
                                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="timeline-image">
                                    <img class="rounded-circle img-fluid" src="assets/img/about3.jpg" alt="">
                                </div>
                                <div class="timeline-panel">
                                    <div class="timeline-heading">
                                        <h4>December 2012</h4>
                                        <h4 class="subheading">Transition to Full Service</h4>
                                    </div>
                                    <div class="timeline-body">
                                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
                                    </div>
                                </div>
                            </li>
                            <li class="timeline-inverted">
                                <div class="timeline-image">
                                    <img class="rounded-circle img-fluid" src="assets/img/about4.jpg" alt="">
                                </div>
                                <div class="timeline-panel">
                                    <div class="timeline-heading">
                                        <h4>July 2014</h4>
                                        <h4 class="subheading">Phase Two Expansion</h4>
                                    </div>
                                    <div class="timeline-body">
                                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p>
                                    </div>
                                </div>
                            </li>
                            <li class="timeline-inverted">
                                <div class="timeline-image">
                                    <h4>Be Part
                                        <br>Of Our
                                        <br>Story!</h4>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <section class="get-started">
            <div class="container">
                <h2>Let's Get Started Now. It's FREE!</h2>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                <a href="contact.html" class="button">Start Free Trial</a>
            </div>
        </section>
    </div>

    <footer>
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <ul>
                        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                        <li><a href="#"><i class="fa fa-rss"></i></a></li>
                        <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                        <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                        <li><a href="#"><i class="fa fa-skype"></i></a></li>
                        <li><a href="#"><i class="fa fa-vimeo"></i></a></li>
                        <li><a href="#"><i class="fa fa-tumblr"></i></a></li>
                    </ul>
                </div>
                <div class="col-md-6">
                    <p><a target="_blank" href="http://www.mobanwang.com/" title="网页模板">网页模板</a></p>
                </div>
            </div>
        </div>
    </footer>

    <script src="js/vendor/jquery-3.1.0.min.js"></script>
    <script src="js/vendor/jquery.easing.min.js"></script>
    <script src="js/vendor/tether.js"></script>
    <script src="js/vendor/bootstrap.js"></script>
    <script src="js/vendor/slick.js"></script>
    <script src="js/vendor/isotope.pkgd.min.js"></script>
    <script src="js/main.js"></script>
</body>
</html>
